<template>
    <div>
        <!-- 头部导航 -->
        <van-nav-bar :title="$store.state.pageTitle" left-text="返回" right-text="个人中心" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />

        <!-- 路由占位符 -->
        <router-view></router-view>

        <!-- 底部导航 -->
        <van-tabbar v-model="active">
            <van-tabbar-item icon="shop" @click="go('/index')">正在热映</van-tabbar-item>
            <van-tabbar-item icon="chat" dot @click="go('/login')">用户登录</van-tabbar-item>
            <van-tabbar-item icon="records" info="5" @click="go('/reg')">用户注册</van-tabbar-item>
            <van-tabbar-item icon="gold-coin" info="20" @click="go('/ucenter')">个人中心</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
import Vue from "vue";
//导入顶部导航
import { NavBar } from "vant";
//导入底部导航
import { Tabbar, TabbarItem } from "vant";
Vue.use(NavBar);
Vue.use(Tabbar).use(TabbarItem);
export default {
    data() {
        return {
            active: 0
        };
    },
    methods: {
        go(path){
            this.$router.push({ path: path });
        },
        onClickLeft() {
            // console.log('onClickLeft');
            this.$router.go(-1);
        },
        onClickRight() {
            // console.log('onClickRight');
            this.$router.push({ path: "/ucenter" });
        }
    }
};
</script>
<style lang='less'>
@baseColor: firebrick;
/*顶部导航条样式*/
.van-nav-bar {
    background-color: @baseColor;
    color: #fff;
    .van-nav-bar__text {
        color: #fff;
    }
    span:active {
        background-color: firebrick;
    }
    .van-icon-arrow {
        color: #fff;
    }
}
/*轮播图样式*/
.van-swipe {
    .van-swipe-item img {
        width: 100%;
        height: auto;
    }
}
/*底部导航*/
.van-tabbar {
    .van-tabbar-item--active  {
            color: @baseColor;
        }
}
</style>


